<template>
	<view class="container">
		<view class="form-section">
			<text class="section-title">{{ isEditMode ? '编辑公告内容' : '通知公告上传' }}</text>
			<text class="section-desc">{{ isEditMode ? '请修改以下信息，更新公告内容' : '请填写以下信息，上传裁判通知公告内容' }}</text>
			
			<view class="form-item">
				<text class="form-label required">公告标题</text>
				<input class="form-input" type="text" v-model="formData.title" placeholder="请输入公告标题" />
			</view>
			
			<view class="form-item">
				<text class="form-label required">公告内容</text>
				<!-- 富文本编辑器 -->
				<view class="editor-container" :class="{ 'fullscreen': isFullScreen }">
					<!-- 编辑器工具栏 -->
					<view class="editor-toolbar">
						<!-- 加粗按钮 -->
						<view class="toolbar-btn" @click="formatText('bold')" :class="{ active: formats.bold }">
							<text class="toolbar-icon">B</text>
						</view>
						
						<!-- 字体大小选择 -->
						<view class="toolbar-dropdown">
							<view class="toolbar-btn dropdown-toggle" @click="showFontSizeSelector = !showFontSizeSelector">
								<text class="toolbar-icon">A</text>
								<text class="dropdown-arrow">▼</text>
							</view>
							<view class="dropdown-menu" v-if="showFontSizeSelector">
								<view class="dropdown-item" @click="formatText('fontSize', '14px'); showFontSizeSelector = false">
									<text class="dropdown-text">小</text>
								</view>
								<view class="dropdown-item" @click="formatText('fontSize', '16px'); showFontSizeSelector = false">
									<text class="dropdown-text">中</text>
								</view>
								<view class="dropdown-item" @click="formatText('fontSize', '18px'); showFontSizeSelector = false">
									<text class="dropdown-text">大</text>
								</view>
							</view>
						</view>
						
						<!-- 文字颜色选择 -->
						<view class="toolbar-dropdown">
							<view class="toolbar-btn dropdown-toggle" @click="showColorSelector = !showColorSelector">
								<view class="font-color-icon">
									<text>A</text>
									<view class="underline" :style="{backgroundColor: currentColor || '#000000'}"></view>
								</view>
							</view>
							<view class="dropdown-menu color-menu" v-if="showColorSelector">
								<view class="color-grid">
									<view 
										class="color-item" 
										v-for="(color, index) in colorList" :key="index"
										:style="{backgroundColor: color}"
										@click="formatText('color', color); currentColor = color; showColorSelector = false">
									</view>
								</view>
							</view>
						</view>
						
						<!-- 对齐方式 - 只保留4种对齐方式 -->
						<view class="toolbar-btn" @click="formatText('align', 'left')" :class="{ active: formats.align === 'left' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line left-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<view class="toolbar-btn" @click="formatText('align', 'center')" :class="{ active: formats.align === 'center' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line center-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<view class="toolbar-btn" @click="formatText('align', 'right')" :class="{ active: formats.align === 'right' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line right-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<view class="toolbar-btn" @click="formatText('align', 'justify')" :class="{ active: formats.align === 'justify' }">
							<view class="align-icon">
								<view class="align-line full-line"></view>
								<view class="align-line full-line"></view>
								<view class="align-line full-line"></view>
							</view>
						</view>
						
						<!-- 项目符号 -->
						<view class="toolbar-btn" @click="formatText('list', 'bullet')" :class="{ active: formats.list === 'bullet' }">
							<view class="bullet-icon">
								<view class="bullet-item">
									<view class="bullet-dot"></view>
									<view class="bullet-line"></view>
								</view>
								<view class="bullet-item">
									<view class="bullet-dot"></view>
									<view class="bullet-line"></view>
								</view>
								<view class="bullet-item">
									<view class="bullet-dot"></view>
									<view class="bullet-line"></view>
								</view>
							</view>
						</view>
						
						<!-- 图片插入按钮 -->
						<view class="toolbar-btn" @click="insertImage">
							<text class="toolbar-icon">🖼️</text>
						</view>
						
						<!-- 全屏按钮 -->
						<view class="toolbar-btn fullscreen-btn" @click="openFullscreenEditor">
							<text class="fullscreen-text">全屏</text>
						</view>
					</view>
					
					<!-- 编辑器主体 -->
					<editor 
						id="editor" 
						class="editor" 
						:placeholder="'请输入公告详细内容（支持丰富的文字排版和图片）'" 
						@ready="onEditorReady" 
						@input="onEditorInput"
						:show-img-resize="true"
						:show-img-toolbar="true"
					></editor>
				</view>
			</view>
			
			<!-- 图片上传 -->
			<view class="form-item">
				<text class="form-label">附件图片</text>
				<text class="form-desc">上传与公告相关的图片（最多5张）</text>
				<view class="image-uploader">
					<view class="image-list">
						<view class="image-item" v-for="(item, index) in formData.images" :key="index">
							<image class="preview-image" :src="item.url" mode="aspectFill"></image>
							<view class="image-delete" @click="deleteImage(index)">×</view>
						</view>
						<view class="image-add" @click="chooseImage" v-if="formData.images.length < 5">
							<text class="add-icon">+</text>
							<text class="add-text">添加图片</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 文档上传 -->
			<view class="form-item">
				<text class="form-label">附件文档</text>
				<text class="form-desc">上传与公告相关的文档（最多3个，支持PDF、Word、Excel等格式）</text>
				<view class="doc-uploader">
					<view class="doc-list">
						<view class="doc-item" v-for="(item, index) in formData.documents" :key="index">
							<view class="doc-info">
								<text class="doc-icon">📄</text>
								<text class="doc-name">{{item.name}}</text>
							</view>
							<view class="doc-delete" @click="deleteDocument(index)">×</view>
						</view>
						<view class="doc-add" @click="chooseDocument" v-if="formData.documents.length < 3">
							<text class="add-icon">+</text>
							<text class="add-text">添加文档</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label required">公告摘要</text>
				<input class="form-input" type="text" v-model="formData.summary" placeholder="请输入简短摘要，不超过200字" />
			</view>
			
			<!-- 公告类型 -->
			<view class="form-item">
				<text class="form-label required">公告类型</text>
				<picker class="form-picker" :value="categoryIndex" :range="categoryOptions" @change="bindCategoryChange">
					<view class="picker-value">
						{{ categoryOptions[categoryIndex] }}
					</view>
				</picker>
			</view>
			
			<!-- 添加类型选择：普通公告还是活动通知 -->
			<view class="form-item">
				<text class="form-label required">内容类型</text>
				<picker class="form-picker" :value="noticeTypeIndex" :range="noticeTypeOptions" @change="bindNoticeTypeChange">
					<view class="picker-value">
						{{ noticeTypeOptions[noticeTypeIndex] }}
					</view>
				</picker>
			</view>
			
			<!-- 活动信息 仅当选择活动通知时显示 -->
			<view class="form-item" v-if="formData.type === 'activity'">
				<text class="form-label">活动时间</text>
				<picker class="form-picker" mode="date" :value="formData.startTime" start="2020-01-01" :end="endDate" @change="bindStartTimeChange">
					<view class="picker-value">
						{{ formData.startTime || '请选择活动开始时间' }}
					</view>
				</picker>
			</view>
			
			<view class="form-item" v-if="formData.type === 'activity'">
				<text class="form-label">活动结束</text>
				<picker class="form-picker" mode="date" :value="formData.endTime" :start="formData.startTime || formData.publishDate" @change="bindEndTimeChange">
					<view class="picker-value">
						{{ formData.endTime || '请选择活动结束时间（可选）' }}
					</view>
				</picker>
			</view>
			
			<view class="form-item" v-if="formData.type === 'activity'">
				<text class="form-label">活动地点</text>
				<input class="form-input" type="text" v-model="formData.location" placeholder="请输入活动地点" />
			</view>
			
			<!-- 公告标签 -->
			<view class="form-item">
				<text class="form-label required">公告标签</text>
				<input class="form-input" type="text" v-model="formData.tags" placeholder="请输入标签，多个标签用逗号分隔" />
			</view>
			
			<view class="form-item">
				<text class="form-label required">发布日期</text>
				<picker class="form-picker" mode="date" :value="formData.publishDate" start="2020-01-01" :end="endDate" @change="bindDateChange">
					<view class="picker-value">
						{{ formData.publishDate }}
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="form-label">截止日期</text>
				<picker class="form-picker" mode="date" :value="formData.endDate" :start="formData.publishDate" @change="bindEndDateChange">
					<view class="picker-value">
						{{ formData.endDate || '请选择截止日期（可选）' }}
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="form-label">重要程度</text>
				<picker class="form-picker" :value="importanceIndex" :range="importanceOptions" @change="bindImportanceChange">
					<view class="picker-value">
						{{ importanceOptions[importanceIndex] }}
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="form-label">显示在首页轮播</text>
				<view class="switch-container">
					<switch :checked="formData.showInBanner" @change="bindShowInBannerChange" color="#1BAE76" />
					<text class="switch-label">{{ formData.showInBanner ? '显示' : '不显示' }}</text>
				</view>
			</view>
			
			<view class="form-item" v-if="formData.showInBanner">
				<text class="form-label">轮播图片</text>
				<text class="form-desc">上传轮播图显示的图片，建议尺寸1000x400</text>
				<view class="banner-uploader">
					<view class="banner-preview" v-if="formData.bannerImage.url">
						<image class="banner-image" :src="formData.bannerImage.url" mode="aspectFill"></image>
						<view class="banner-delete" @click="deleteBannerImage">×</view>
					</view>
					<view class="banner-add" @click="chooseBannerImage" v-else>
						<text class="add-icon">+</text>
						<text class="add-text">上传轮播图片</text>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label required">语言</text>
				<picker class="form-picker" :value="languageIndex" :range="languageOptions" @change="bindLanguageChange">
					<view class="picker-value">
						{{ languageOptions[languageIndex] }}
					</view>
				</picker>
			</view>
		</view>
		
		<view class="submit-section">
			<button class="submit-btn" @click="submitForm" :disabled="submitting">
				{{ submitting ? (isEditMode ? '更新中...' : '提交中...') : (isEditMode ? '更新公告' : '提交') }}
			</button>
		</view>
	</view>
</template>

<script>
	import '../admin/app.css';
	export default {
		data() {
			const today = new Date();
			const year = today.getFullYear();
			const month = (today.getMonth() + 1).toString().padStart(2, '0');
			const day = today.getDate().toString().padStart(2, '0');
			const currentDate = `${year}-${month}-${day}`;
			
			return {
				noticeId: '', // 添加公告ID字段
				isEditMode: false, // 添加编辑模式标记
				formData: {
					title: '',
					content: '',
					summary: '',
					category: '赛事通知',
					tags: '',
					publishDate: currentDate,
					endDate: '',
					importance: '普通',
					language: 'zh-CN',
					images: [], // 存储图片信息 [{url: '本地路径', cloudPath: '云存储路径'}]
					documents: [], // 存储文档信息 [{name: '文件名', url: '本地路径', cloudPath: '云存储路径'}]
					showInBanner: false,
					bannerImage: {},
					type: 'notice', // 默认为普通公告，可选值：notice(普通公告), activity(活动通知)
					startTime: '', // 活动开始时间
					endTime: '', // 活动结束时间
					location: '' // 活动地点
				},
				categoryOptions: ['赛事通知', '培训通知', '规则更新', '其他通知'],
				categoryIndex: 0,
				noticeTypeOptions: ['普通公告', '活动通知'],
				noticeTypeIndex: 0,
				importanceOptions: ['普通', '重要', '紧急'],
				importanceIndex: 0,
				languageOptions: ['中文(zh-CN)', '英文(en)'],
				languageIndex: 0,
				submitting: false,
				endDate: `${year + 1}-${month}-${day}`, // 默认结束日期为一年后
				uploadingFiles: 0, // 正在上传的文件数量计数器
				
				// 编辑器相关
				editorCtx: null,  // 编辑器上下文
				formats: {}, // 当前格式
				editorReadyFlag: false, // 编辑器是否准备好
				isFullScreen: false, // 是否全屏模式
				showFontSizeSelector: false, // 显示字体大小选择器
				showColorSelector: false, // 显示颜色选择器
				currentColor: '#000000', // 当前选择的颜色
				// 颜色列表
				colorList: [
					'#000000', '#FF0000', '#00FF00', '#0000FF', 
					'#FFFF00', '#00FFFF', '#FF00FF', '#C0C0C0',
					'#808080', '#800000', '#808000', '#008000', 
					'#800080', '#008080', '#000080', '#FFFFFF'
				]
			}
		},
		onLoad(options) {
			console.log('公告上传页面onLoad, 参数:', options);
			
			// 获取并验证ID参数
			let noticeId = '';
			if (options && options.id) {
				noticeId = decodeURIComponent(options.id);
				console.log('从URL参数获取公告ID:', noticeId);
			}
			
			// 如果URL参数中没有ID，尝试从本地存储获取
			if (!noticeId) {
				try {
					const storedId = uni.getStorageSync('edit_notice_id');
					if (storedId) {
						noticeId = storedId;
						console.log('从本地存储获取公告ID:', noticeId);
					}
				} catch (error) {
					console.error('读取本地存储ID失败:', error);
				}
			}
			
			// 检查ID是否有效
			if (noticeId && options.mode === 'edit') {
				this.noticeId = noticeId;
				this.isEditMode = true;
				console.log('设置编辑模式, 公告ID:', this.noticeId);
			} else if (options.mode === 'edit') {
				// 模式为编辑但没有ID
				console.error('编辑模式但ID无效');
				uni.showToast({
					title: '公告ID无效，无法编辑',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
				return;
			}
			
			// 检查用户权限
			this.checkadminPermission();
			
			// 如果是编辑模式且ID有效，加载公告详情
			if (this.isEditMode && this.noticeId) {
				console.log('准备加载公告详情');
				// 延迟加载详情，确保页面已经完全初始化
				setTimeout(() => {
					this.loadNoticeDetail();
				}, 300);
			}
			
			// 只在H5环境中添加窗口大小变化监听
			// #ifdef H5
			if (window) {
				window.addEventListener('resize', this.handleWindowResize);
			}
			// #endif
		},
		onReady() {
			// 添加点击事件监听，用于关闭弹出菜单，仅在H5环境中
			// #ifdef H5
			if (document) {
				document.addEventListener('click', this.handleClickOutside);
			}
			// #endif
		},
		onUnload() {
			// 移除点击事件监听，仅在H5环境中
			// #ifdef H5
			if (document) {
				document.removeEventListener('click', this.handleClickOutside);
			}
			// #endif
			
			// 移除窗口大小变化监听，仅在H5环境中
			// #ifdef H5
			if (window) {
				window.removeEventListener('resize', this.handleWindowResize);
			}
			// #endif
		},
		methods: {
			// 检查是否为裁判监督并已认证
			checkadminPermission() {
				try {
					// 尝试获取用户信息
					let userInfo = {};
					const userInfoStr = uni.getStorageSync('userInfo');
					
					// 尝试解析本地存储的用户信息
					if (userInfoStr) {
						try {
							userInfo = JSON.parse(userInfoStr);
						} catch (e) {
							userInfo = userInfoStr; // 如果已经是对象，直接使用
						}
					} else {
						userInfo = {}; // 无数据
					}
					
					// 检查是否有其他可能的存储位置
					if (!userInfo._id && !userInfo.userId) {
						const userId = uni.getStorageSync('userId');
						if (userId) {
							console.log('从单独的userId存储中找到ID:', userId);
							userInfo._id = userId;
							userInfo.userId = userId;
						}
					}
					
					if (!userInfo.token) {
						const token = uni.getStorageSync('token');
						if (token) {
							console.log('从单独的token存储中找到token');
							userInfo.token = token;
						}
					}
					
					// 当userId存在但_id不存在时，或相反情况，互相赋值以保证兼容性
					if (userInfo.userId && !userInfo._id) userInfo._id = userInfo.userId;
					if (userInfo._id && !userInfo.userId) userInfo.userId = userInfo._id;
					
					// 检查用户ID和角色
					const hasValidId = userInfo._id || userInfo.userId;
					const isadmin = userInfo.role === 4 || userInfo.role === "4" || userInfo.role === "admin" || userInfo.role === "管理员";
					
					// 检查证书状态 - 扩展判断条件，增加更多可能的有效值
					const credentialStatus = String(userInfo.credential_status || '').toLowerCase();
					const status = String(userInfo.status || '').toLowerCase();
					
					const validStatusValues = ['approved', 'valid', 'verified', 'active', '有效', '通过', '已认证', '已通过'];
					const hasValidCredential = validStatusValues.some(value => 
						credentialStatus.includes(value) || status.includes(value)
					);
					
					// 为调试目的，输出详细的验证信息
					console.log('权限验证信息：', {
						hasValidId,
						isadmin,
						hasValidCredential,
						credentialStatus,
						status,
						userInfo 
					});
					
					// 输出本地存储中的所有键，帮助调试
					const storageInfo = uni.getStorageInfoSync();
					console.log('本地存储中的所有键:', storageInfo.keys);
					
					// 如果不满足条件，显示错误
					if (!hasValidId || !isadmin || !hasValidCredential) {
						console.error('权限验证失败：', {
							hasValidId,
							isadmin,
							hasValidCredential,
							userInfo 
						});
						
						uni.showModal({
							title: '无权访问',
							content: '该页面仅对认证通过的裁判监督开放',
							showCancel: false,
							success: () => {
								uni.navigateBack();
							}
						});
					} else {
						// 权限验证通过，存储有效的用户信息
						console.log('权限验证通过，存储有效的用户信息');
						// 确保userInfo被正确存储
						uni.setStorageSync('userInfo', JSON.stringify(userInfo));
					}
				} catch (error) {
					console.error('权限检查失败:', error);
					uni.showModal({
						title: '系统错误',
						content: '权限验证失败，请重新登录后再试',
						showCancel: false,
						success: () => {
							uni.navigateBack();
						}
					});
				}
			},
			
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 5 - this.formData.images.length, // 最多可选择的图片数量
					sizeType: ['compressed'], // 压缩图片
					sourceType: ['album', 'camera'], // 从相册或相机选择
					success: (res) => {
						// 预处理选择的图片
						const tempFiles = res.tempFiles;
						tempFiles.forEach(file => {
							// 检查文件大小，限制为10MB
							if (file.size > 10 * 1024 * 1024) {
								this.showToast('图片大小不能超过10MB');
								return;
							}
							
							// 添加到图片列表
							this.formData.images.push({
								url: file.path,
								size: file.size,
								name: this.getFileName(file.path)
							});
						});
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					}
				});
			},
			
			// 删除图片
			deleteImage(index) {
				this.formData.images.splice(index, 1);
			},
			
			// 选择文档
			chooseDocument() {
				// 在小程序环境中使用wx.chooseMessageFile，在App环境中使用plus.io
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					count: 3 - this.formData.documents.length,
					type: 'file',
					extension: ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.txt'],
					success: (res) => {
						const tempFiles = res.tempFiles;
						tempFiles.forEach(file => {
							// 检查文件大小，限制为20MB
							if (file.size > 20 * 1024 * 1024) {
								this.showToast('文档大小不能超过20MB');
								return;
							}
							
							// 添加到文档列表
							this.formData.documents.push({
								name: file.name,
								url: file.path,
								size: file.size
							});
						});
					},
					fail: (err) => {
						console.error('选择文档失败', err);
					}
				});
				// #endif
				
				// #ifdef APP-PLUS
				plus.io.resolveLocalFileSystemURL('_doc/', (entry) => {
					entry.file((file) => {
						// 添加到文档列表
						this.formData.documents.push({
							name: file.name,
							url: file.path,
							size: file.size
						});
					});
				}, (err) => {
					console.error('选择文档失败', err);
					this.showToast('选择文档失败');
				});
				// #endif
				
				// #ifdef H5
				// H5环境下使用input标签模拟文件选择
				const input = document.createElement('input');
				input.type = 'file';
				input.accept = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt';
				input.multiple = (3 - this.formData.documents.length) > 1;
				
				input.onchange = (event) => {
					const files = event.target.files;
					for (let i = 0; i < files.length && i < (3 - this.formData.documents.length); i++) {
						const file = files[i];
						// 检查文件大小
						if (file.size > 20 * 1024 * 1024) {
							this.showToast('文档大小不能超过20MB');
							continue;
						}
						
						// 添加到文档列表
						this.formData.documents.push({
							name: file.name,
							url: URL.createObjectURL(file),
							size: file.size,
							file: file // 保存文件对象，用于后续上传
						});
					}
				};
				
				input.click();
				// #endif
			},
			
			// 删除文档
			deleteDocument(index) {
				this.formData.documents.splice(index, 1);
			},
			
			// 获取文件名称
			getFileName(filePath) {
				return filePath.substring(filePath.lastIndexOf('/') + 1);
			},
			
			// 上传图片到云存储
			async uploadImagesToCloud() {
				if (this.formData.images.length === 0) return [];
				
				const imageUploadPromises = this.formData.images.map((image, index) => {
					return new Promise((resolve, reject) => {
						const cloudPath = `notices/${new Date().getTime()}_${index}_${this.getFileName(image.url)}`;
						
						uniCloud.uploadFile({
							filePath: image.url,
							cloudPath: cloudPath,
							success: (res) => {
								resolve({
									url: res.fileID,
									name: this.getFileName(image.url),
									size: image.size
								});
							},
							fail: (err) => {
								console.error('上传图片失败', err);
								reject(err);
							}
						});
					});
				});
				
				try {
					return await Promise.all(imageUploadPromises);
				} catch (error) {
					throw new Error('上传图片失败: ' + error.message);
				}
			},
			
			// 上传文档到云存储
			async uploadDocumentsToCloud() {
				if (this.formData.documents.length === 0) return [];
				
				const documentUploadPromises = this.formData.documents.map((doc, index) => {
					return new Promise((resolve, reject) => {
						const cloudPath = `notices/docs/${new Date().getTime()}_${index}_${doc.name}`;
						
						uniCloud.uploadFile({
							filePath: doc.url,
							cloudPath: cloudPath,
							success: (res) => {
								resolve({
									url: res.fileID,
									name: doc.name,
									size: doc.size
								});
							},
							fail: (err) => {
								console.error('上传文档失败', err);
								reject(err);
							}
						});
					});
				});
				
				try {
					return await Promise.all(documentUploadPromises);
				} catch (error) {
					throw new Error('上传文档失败: ' + error.message);
				}
			},
			
			// 分类选择变化
			bindCategoryChange(e) {
				this.categoryIndex = e.detail.value;
				this.formData.category = this.categoryOptions[this.categoryIndex];
			},
			
			// 内容类型选择变化
			bindNoticeTypeChange(e) {
				this.noticeTypeIndex = e.detail.value;
				this.formData.type = this.noticeTypeIndex == 0 ? 'notice' : 'activity';
			},
			
			// 重要性选择变化
			bindImportanceChange(e) {
				this.importanceIndex = e.detail.value;
				this.formData.importance = this.importanceOptions[this.importanceIndex];
			},
			
			// 发布日期选择变化
			bindDateChange(e) {
				this.formData.publishDate = e.detail.value;
				// 如果截止日期早于发布日期，则重置截止日期
				if (this.formData.endDate && this.formData.endDate < this.formData.publishDate) {
					this.formData.endDate = '';
				}
			},
			
			// 截止日期选择变化
			bindEndDateChange(e) {
				this.formData.endDate = e.detail.value;
			},
			
			// 语言选择变化
			bindLanguageChange(e) {
				this.languageIndex = e.detail.value;
				this.formData.language = e.detail.value == 0 ? 'zh-CN' : 'en';
			},
			
			// 显示在首页轮播变化
			bindShowInBannerChange(e) {
				this.formData.showInBanner = e.detail.value;
			},
			
			// 选择轮播图片
			chooseBannerImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFiles = res.tempFiles;
						if (tempFiles.length > 0) {
							const file = tempFiles[0];
							// 检查文件大小，限制为10MB
							if (file.size > 10 * 1024 * 1024) {
								this.showToast('图片大小不能超过10MB');
								return;
							}
							
							// 添加到轮播图片
							this.formData.bannerImage = {
								url: file.path,
								size: file.size,
								name: this.getFileName(file.path)
							};
						}
					},
					fail: (err) => {
						console.error('选择轮播图片失败', err);
					}
				});
			},
			
			// 删除轮播图片
			deleteBannerImage() {
				this.formData.bannerImage = {};
			},
			
			// 活动开始时间变化
			bindStartTimeChange(e) {
				this.formData.startTime = e.detail.value;
				// 如果活动结束时间早于开始时间，则重置结束时间
				if (this.formData.endTime && this.formData.endTime < this.formData.startTime) {
					this.formData.endTime = '';
				}
			},
			
			// 活动结束时间变化
			bindEndTimeChange(e) {
				this.formData.endTime = e.detail.value;
			},
			
			// 表单提交
			async submitForm() {
				// 表单验证
				if (!this.formData.title.trim()) {
					return this.showToast('请输入公告标题');
				}
				if (!this.formData.content.trim()) {
					return this.showToast('请输入公告内容');
				}
				if (!this.formData.summary.trim()) {
					return this.showToast('请输入公告摘要');
				}
				if (!this.formData.publishDate) {
					return this.showToast('请选择发布日期');
				}
				
				// 编辑模式下检查ID
				if (this.isEditMode && !this.noticeId) {
					console.error('编辑模式下公告ID为空');
					return this.showToast('公告ID无效，无法更新');
				}
				
				// 检查活动特有字段
				if (this.formData.type === 'activity') {
					if (!this.formData.startTime) {
						return this.showToast('请选择活动开始时间');
					}
				}
				
				// 检查如果选择了在轮播图显示，必须上传轮播图片
				if (this.formData.showInBanner && !this.formData.bannerImage.url) {
					return this.showToast('请上传轮播图片');
				}
				
				// 处理标签
				let tags = [];
				if (this.formData.tags.trim()) {
					tags = this.formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag);
				}
				
				// 设置提交状态
				this.submitting = true;
				
				// 获取用户信息 - 改进的方法
				let userInfo = {};
				try {
					const userInfoStr = uni.getStorageSync('userInfo');
					
					if (userInfoStr) {
						// 尝试解析字符串，如果已经是对象则直接使用
						try {
							userInfo = JSON.parse(userInfoStr);
						} catch (e) {
							userInfo = userInfoStr; // 如果非JSON字符串，可能已经是对象
						}
					}
					
					// 为调试目的输出当前获取的用户信息
					console.log('获取到的用户信息:', userInfo);
					
					// 如果userInfo中没有可用的ID，尝试从其他地方获取
					if (!userInfo._id && !userInfo.userId) {
						const userId = uni.getStorageSync('userId');
						const token = uni.getStorageSync('token');
						
						if (userId) {
							userInfo._id = userId;
							userInfo.userId = userId;
							console.log('从userId获取到ID:', userId);
						}
						
						if (token) {
							userInfo.token = token;
							console.log('从token获取到令牌');
						}
					}
					
					// 当userId存在但_id不存在时，或相反情况，互相赋值以保证兼容性
					if (userInfo.userId && !userInfo._id) userInfo._id = userInfo.userId;
					if (userInfo._id && !userInfo.userId) userInfo.userId = userInfo._id;
					
					// 验证是否有可用的用户ID和token
					if (!userInfo._id && !userInfo.userId) {
						this.submitting = false;
						return this.showToast('未能获取用户ID，请重新登录后再试');
					}
					
					if (!userInfo.token) {
						console.warn('缺少用户token，可能会导致授权问题');
						// 尝试使用其他可能的token字段
						if (userInfo.accessToken) userInfo.token = userInfo.accessToken;
					}
				} catch (error) {
					console.error('获取用户信息失败:', error);
					this.submitting = false;
					return this.showToast('获取用户信息失败，请重新登录');
				}
				
				try {
					// 显示上传中提示
					if (this.formData.images.length > 0 || this.formData.documents.length > 0 || this.formData.bannerImage.url) {
						uni.showLoading({
							title: '正在上传附件...',
							mask: true
						});
					}
					
					// 上传图片和文档到云存储
					const uploadedImages = await this.uploadImagesToCloud();
					const uploadedDocuments = await this.uploadDocumentsToCloud();
					
					// 上传轮播图片
					let uploadedBannerImage = null;
					if (this.formData.showInBanner && this.formData.bannerImage.url) {
						uploadedBannerImage = await this.uploadBannerImageToCloud();
					}
					
					// 隐藏上传提示
					uni.hideLoading();
					
					// 准备提交的数据
					const submitData = {
						title: this.formData.title,
						content: this.formData.content,
						summary: this.formData.summary,
						category: this.formData.category,
						tags: tags,
						publishDate: this.formData.publishDate,
						endDate: this.formData.endDate || null,
						importance: this.formData.importance,
						language: this.formData.language,
						images: uploadedImages,
						documents: uploadedDocuments,
						showInBanner: this.formData.showInBanner,
						bannerImage: uploadedBannerImage,
						type: this.formData.type, // 添加公告类型
						startTime: this.formData.startTime || null, // 活动开始时间
						endTime: this.formData.endTime || null, // 活动结束时间
						location: this.formData.location || null, // 活动地点
						status: 'published', // 添加状态字段
						userId: userInfo._id || userInfo.userId, // 使用可用的任一ID
						token: userInfo.token,
						// 添加完整的用户信息作为备份
						userInfo: userInfo
					};
					
					// 编辑模式下添加公告ID
					if (this.isEditMode) {
						if (!this.noticeId) {
							this.submitting = false;
							console.error('提交时公告ID为空');
							return this.showToast('公告ID无效，无法更新');
						}
						
						submitData.noticeId = this.noticeId;
						console.log('更新模式，使用ID:', this.noticeId);
					}
					
					console.log('准备提交数据:', JSON.stringify(submitData));
					
					// 设置超时定时器
					let timeoutId = setTimeout(() => {
						if (this.submitting) {
							console.warn('云对象调用超时');
							this.submitting = false;
							uni.hideLoading();
							this.showToast('请求超时，请检查网络后重试');
						}
					}, 15000); // 15秒超时
					
					// 使用云对象方式调用
					try {
						const noticeService = uniCloud.importObject('notice-service');
						let res;
						
						if (this.isEditMode) {
							console.log('调用云对象updateNotice方法');
							// 编辑模式 - 调用updateNotice方法
							res = await noticeService.updateNotice(
								submitData.noticeId,
								submitData.title,
								submitData.content,
								submitData.category,
								submitData.type,
								submitData.importance,
								submitData.showInBanner,
								submitData.status,
								submitData.userId,
								submitData.token,
								submitData.bannerImage,
								submitData.images,
								submitData.documents,
								submitData.summary,
								submitData.tags,
								submitData.publishDate,
								submitData.endDate,
								submitData.language,
								submitData.startTime,
								submitData.endTime,
								submitData.location
							);
						} else {
							console.log('调用云对象uploadNoticeContent方法');
							// 上传模式 - 调用uploadNoticeContent方法
							res = await noticeService.uploadNoticeContent(
								submitData.title,
								submitData.content,
								submitData.category,
								submitData.type,
								submitData.importance,
								submitData.showInBanner,
								submitData.status,
								submitData.userId,
								submitData.token,
								submitData.bannerImage,
								submitData.images,
								submitData.documents,
								submitData.summary,
								submitData.tags,
								submitData.publishDate,
								submitData.endDate,
								submitData.language,
								submitData.startTime,
								submitData.endTime,
								submitData.location
							);
						}
						
						clearTimeout(timeoutId); // 清除超时定时器
						console.log(`云对象调用结果:`, res);
						
						if (res && res.code === 0) {
							uni.showModal({
								title: this.isEditMode ? '更新成功' : '提交成功',
								content: this.isEditMode ? '公告内容已成功更新' : '公告内容已成功上传',
								showCancel: false,
								success: () => {
									// 编辑完成后清除本地存储的ID
									if (this.isEditMode) {
										try {
											uni.removeStorageSync('edit_notice_id');
										} catch (e) {
											console.error('清除本地存储ID失败', e);
										}
										
										// 编辑模式下返回上一页
										uni.navigateBack();
									} else {
										// 上传模式下重置表单
										this.resetForm();
									}
								}
							});
						} else {
							this.showToast((res && res.message) || '提交失败，请稍后重试');
						}
					} catch (err) {
						clearTimeout(timeoutId); // 清除超时定时器
						console.error('云对象调用失败:', err);
						this.showToast('网络错误，请稍后重试');
					} finally {
						this.submitting = false;
					}
				} catch (error) {
					console.error('处理文件上传失败:', error);
					uni.hideLoading();
					this.submitting = false;
					this.showToast('上传附件失败: ' + error.message);
				}
			},
			
			// 重置表单
			resetForm() {
				const today = new Date();
				const year = today.getFullYear();
				const month = (today.getMonth() + 1).toString().padStart(2, '0');
				const day = today.getDate().toString().padStart(2, '0');
				const currentDate = `${year}-${month}-${day}`;
				
				this.formData = {
					title: '',
					content: '',
					summary: '',
					category: '赛事通知',
					tags: '',
					publishDate: currentDate,
					endDate: '',
					importance: '普通',
					language: 'zh-CN',
					images: [],
					documents: [],
					showInBanner: false,
					bannerImage: {},
					type: 'notice', // 重置为普通公告
					startTime: '', // 清空活动开始时间
					endTime: '', // 清空活动结束时间
					location: '' // 清空活动地点
				};
				this.categoryIndex = 0;
				this.noticeTypeIndex = 0;
				this.importanceIndex = 0;
				this.languageIndex = 0;
			},
			
			// 显示提示消息
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			},
			
			// 添加轮播图片上传方法
			async uploadBannerImageToCloud() {
				if (!this.formData.bannerImage.url) return null;
				
				try {
					return await new Promise((resolve, reject) => {
						const cloudPath = `notices/banners/${new Date().getTime()}_${this.getFileName(this.formData.bannerImage.url)}`;
						
						uniCloud.uploadFile({
							filePath: this.formData.bannerImage.url,
							cloudPath: cloudPath,
							success: (res) => {
								resolve({
									url: res.fileID,
									name: this.getFileName(this.formData.bannerImage.url),
									size: this.formData.bannerImage.size
								});
							},
							fail: (err) => {
								console.error('上传轮播图片失败', err);
								reject(err);
							}
						});
					});
				} catch (error) {
					throw new Error('上传轮播图片失败: ' + error.message);
				}
			},
			
			// 编辑器准备就绪
			onEditorReady() {
				// #ifdef MP-WEIXIN || H5
				try {
					const query = uni.createSelectorQuery();
					if (!query) {
						console.error('无法创建选择器查询');
						return;
					}
					
					const editorQuery = query.select('#editor');
					if (!editorQuery) {
						console.error('找不到编辑器元素');
						return;
					}
					
					editorQuery.context((res) => {
						if (res && res.context) {
							this.editorCtx = res.context;
							this.editorReadyFlag = true;
							console.log('编辑器已准备就绪');
							
							// 如果是编辑模式且已加载了内容，设置编辑器内容
							if (this.isEditMode && this.formData.content) {
								console.log('编辑器就绪后设置内容');
								this._setEditorContent();
							}
							
							// 如果有内容，设置到编辑器
							if (this.formData.content) {
								this.editorCtx.setContents({
									html: this.formData.content,
									success: () => {
										console.log('恢复编辑器内容成功');
										// 如果处于全屏模式，调整内边距
										if (this.isFullScreen) {
											this.adjustEditorPadding();
										}
									},
									fail: (err) => {
										console.error('恢复编辑器内容失败:', err);
									}
								});
							} else if (this.isFullScreen) {
								// 如果是空内容但处于全屏模式，仍需调整内边距
								this.adjustEditorPadding();
							}
						} else {
							console.error('编辑器上下文获取失败');
						}
					}).exec();
				} catch (error) {
					console.error('编辑器初始化出错:', error);
				}
				// #endif
			},
			
			// 监听编辑器输入
			onEditorInput(e) {
				// 更新content值
				this.formData.content = e.detail.html || '';
			},
			
			// 应用文本格式
			formatText(name, value) {
				if (!this.editorCtx) return;
				this.editorCtx.format(name, value);
			},
			
			// 插入图片到编辑器
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 先上传图片
						this.uploadInlineImage(res.tempFilePaths[0]);
					},
					fail: (err) => {
						console.error('选择内联图片失败:', err);
						this.showToast('选择图片失败，请重试');
					}
				});
			},
			
			// 上传内联图片
			uploadInlineImage(filePath) {
				uni.showLoading({ title: '上传图片中...' });
				
				const cloudPath = `notice_inline_images/${new Date().getTime()}_${Math.random().toString(36).substring(2, 10)}.jpg`;
				
				uniCloud.uploadFile({
					filePath: filePath,
					cloudPath: cloudPath,
					success: (res) => {
						const fileID = res.fileID;
						// 将图片插入到编辑器
						this.editorCtx.insertImage({
							src: fileID,
							alt: '公告图片',
							width: '100%',
							success: () => {
								console.log('插入图片成功');
							},
							fail: (err) => {
								console.error('插入图片失败:', err);
								this.showToast('插入图片失败');
							}
						});
					},
					fail: (err) => {
						console.error('上传内联图片失败', err);
						this.showToast('上传图片失败，请重试');
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			
			// 处理窗口大小变化
			handleWindowResize() {
				if (this.isFullScreen) {
					this.adjustEditorPadding();
				}
			},
			
			// 调整编辑器内边距
			adjustEditorPadding() {
				if (!this.editorCtx) return;
				
				// 在全屏模式下调整编辑器内边距，解决iOS上的键盘遮挡问题
				// #ifdef H5
				if (this.isIOS() && document && document.body) {
					document.body.style.paddingBottom = '150px';
				}
				// #endif
			},
			
			// 检测是否为iOS设备
			isIOS() {
				// #ifdef H5
				return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
				// #endif
				
				// #ifndef H5
				return false;
				// #endif
			},
			
			// 切换全屏模式
			toggleFullScreen() {
				this.isFullScreen = !this.isFullScreen;
				
				// 等待DOM更新后调整编辑器内边距
				setTimeout(() => {
					this.adjustEditorPadding();
				}, 100);
			},
			
			// 处理点击外部事件，关闭下拉菜单
			handleClickOutside(event) {
				// #ifdef H5
				// 检查点击事件是否发生在下拉菜单内部
				if (event && event.target) {
					const isDropdown = event.target.closest('.toolbar-dropdown');
					if (!isDropdown) {
						this.showFontSizeSelector = false;
						this.showColorSelector = false;
					}
				}
				// #endif
				
				// #ifndef H5
				// 在非H5环境中简单地关闭选择器
				this.showFontSizeSelector = false;
				this.showColorSelector = false;
				// #endif
			},
			
			// 加载公告详情
			async loadNoticeDetail() {
				// 检查公告ID是否有效
				if (!this.noticeId) {
					this.showToast('公告ID无效，无法加载');
					this.isEditMode = false;
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					return;
				}
				
				uni.showLoading({
					title: '加载中...'
				});
				
				console.log('正在加载公告详情，ID:', this.noticeId);
				
				try {
					// 使用云对象方式调用getNoticeDetail
					console.log('详情查询参数:', this.noticeId);
					
					const noticeService = uniCloud.importObject('notice-service');
					const res = await noticeService.getNoticeDetail(this.noticeId);
					
					uni.hideLoading();
					console.log('获取公告详情返回:', res);
					
					if (res && res.code === 0 && res.data) {
						const noticeData = res.data;
						
						// 填充表单数据
						this.formData = {
							title: noticeData.title || '',
							content: noticeData.content || '',
							summary: noticeData.summary || '',
							category: noticeData.category || '赛事通知',
							tags: Array.isArray(noticeData.tags) ? noticeData.tags.join(',') : noticeData.tags || '',
							publishDate: noticeData.publishDate ? this.formatDate(noticeData.publishDate) : this.formData.publishDate,
							endDate: noticeData.endDate ? this.formatDate(noticeData.endDate) : '',
							importance: noticeData.importance || '普通',
							language: noticeData.language || 'zh-CN',
							images: [], // 将在下面处理
							documents: [], // 将在下面处理
							showInBanner: noticeData.showInBanner || false,
							bannerImage: {},
							type: noticeData.type || 'notice',
							startTime: noticeData.startTime ? this.formatDate(noticeData.startTime) : '',
							endTime: noticeData.endTime ? this.formatDate(noticeData.endTime) : '',
							location: noticeData.location || ''
						};
						
						// 处理图片
						if (noticeData.images && Array.isArray(noticeData.images)) {
							this.formData.images = noticeData.images.map(img => ({
								url: img.url,
								cloudPath: img.url,
								name: this.getFileNameFromUrl(img.url),
								uploaded: true
							}));
						}
						
						// 处理文档
						if (noticeData.documents && Array.isArray(noticeData.documents)) {
							this.formData.documents = noticeData.documents.map(doc => ({
								url: doc.url,
								cloudPath: doc.url,
								name: doc.name || this.getFileNameFromUrl(doc.url),
								uploaded: true
							}));
						}
						
						// 处理轮播图
						if (noticeData.bannerImage && noticeData.bannerImage.url) {
							this.formData.bannerImage = {
								url: noticeData.bannerImage.url,
								cloudPath: noticeData.bannerImage.url,
								name: noticeData.bannerImage.name || this.getFileNameFromUrl(noticeData.bannerImage.url),
								uploaded: true
							};
						}
						
						// 设置正确的选择器索引
						this.categoryIndex = this.categoryOptions.indexOf(this.formData.category);
						if (this.categoryIndex === -1) this.categoryIndex = 0;
						
						this.noticeTypeIndex = this.formData.type === 'activity' ? 1 : 0;
						
						this.importanceIndex = this.importanceOptions.indexOf(this.formData.importance);
						if (this.importanceIndex === -1) this.importanceIndex = 0;
						
						this.languageIndex = this.formData.language === 'en' ? 1 : 0;
						
						console.log('已加载公告详情:', this.formData);
						
						// 如果编辑器已准备好，设置内容
						if (this.editorCtx && this.editorReadyFlag) {
							this._setEditorContent();
						} else {
							// 如果编辑器还没准备好，设置标记，等待编辑器准备好后设置内容
							console.log('编辑器未准备好，等待...');
							// 尝试定时检查编辑器是否准备好
							this._checkEditorReady();
						}
					} else {
						console.error('获取公告详情失败:', res);
						this.showToast('获取公告详情失败: ' + (res?.message || '未知错误'));
						this.isEditMode = false;
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				} catch (error) {
					uni.hideLoading();
					console.error('调用获取公告详情云对象失败', error);
					this.showToast('网络错误，请重试');
					this.isEditMode = false;
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},
			
			// 获取文件名
			getFileNameFromUrl(url) {
				if (!url) return '';
				const parts = url.split('/');
				const lastPart = parts[parts.length - 1];
				const fileNameParts = lastPart.split('?');
				return decodeURIComponent(fileNameParts[0]);
			},
			
			// 格式化日期为YYYY-MM-DD
			formatDate(dateInput) {
				if (!dateInput) return '';
				
				const date = new Date(dateInput);
				if (isNaN(date.getTime())) return '';
				
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			
			// 检查编辑器是否准备好
			_checkEditorReady() {
				// 最多尝试10次，每次间隔300ms
				let tryCount = 0;
				const maxTries = 10;
				
				const checkInterval = setInterval(() => {
					tryCount++;
					console.log(`检查编辑器就绪状态(${tryCount}/${maxTries})...`);
					
					if (this.editorCtx && this.editorReadyFlag) {
						clearInterval(checkInterval);
						this._setEditorContent();
					} else if (tryCount >= maxTries) {
						clearInterval(checkInterval);
						console.warn('编辑器未能及时准备好，放弃设置内容');
						this.showToast('编辑器加载异常，可能无法显示完整内容');
					}
				}, 300);
			},
			
			// 设置编辑器内容
			_setEditorContent() {
				console.log('设置编辑器内容...');
				if (!this.editorCtx) {
					console.error('编辑器上下文不存在');
					return;
				}
				
				// 微信小程序中可能需要确保内容格式正确
				let content = this.formData.content || '';
				// 确保内容是有效的HTML
				if (!content.trim().startsWith('<')) {
					content = `<p>${content}</p>`;
				}
				
				try {
					// 使用延时确保UI更新完成
					setTimeout(() => {
						this.editorCtx.setContents({
							html: content,
							success: () => {
								console.log('编辑器内容设置成功');
							},
							fail: (err) => {
								console.error('编辑器内容设置失败:', err);
								// 重试一次
								setTimeout(() => {
									console.log('尝试再次设置编辑器内容...');
									this.editorCtx.setContents({
										html: content,
										fail: (retryErr) => {
											console.error('再次设置编辑器内容失败:', retryErr);
											this.showToast('内容加载失败，可能需要手动输入');
										}
									});
								}, 500);
							}
						});
					}, 300);
				} catch (error) {
					console.error('设置编辑器内容出错:', error);
				}
			},
			
			// 打开全屏编辑器
			openFullscreenEditor() {
				// 保存当前内容到缓存
				if (this.formData.content) {
					try {
						const contentData = {
							html: this.formData.content
						};
						uni.setStorageSync('rich_text_editor_content', JSON.stringify(contentData));
					} catch (e) {
						console.error('保存内容到缓存失败', e);
					}
				}
				
				// 跳转到富文本编辑器页面
				uni.navigateTo({
					url: `/packageadmin/admin/rich-text-editor?title=${encodeURIComponent('编辑公告内容')}&placeholder=${encodeURIComponent('请输入公告详细内容（支持丰富的文字排版和图片）')}&mode=fullscreen`
				});
			},
			
			// 接收富文本编辑器返回的内容
			onRichTextEditorComplete(contentData) {
				console.log('接收到编辑器返回内容');
				if (contentData.html) {
					this.formData.content = contentData.html;
					// 将内容同步到编辑器
					if (this.editorCtx) {
						this.editorCtx.setContents({
							html: contentData.html,
							success: () => {
								console.log('同步编辑器内容成功');
							},
							fail: (err) => {
								console.error('同步编辑器内容失败:', err);
							}
						});
					}
				}
			},
		}
	}
</script>

<style>
	/* 这里使用共享样式文件 app.css */
	
	/* 添加图片上传样式 */
	.form-desc {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 15rpx;
		display: block;
	}
	
	.image-uploader, .doc-uploader {
		background-color: #F8F8F8;
		border-radius: 8rpx;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.image-list {
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx;
	}
	
	.image-item {
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.preview-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.image-delete {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFFFFF;
		text-align: center;
		line-height: 36rpx;
		font-size: 32rpx;
		border-radius: 0 0 0 8rpx;
	}
	
	.image-add {
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #CCCCCC;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.add-icon {
		font-size: 48rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}
	
	.add-text {
		font-size: 24rpx;
		color: #999999;
	}
	
	/* 文档上传样式 */
	.doc-list {
		display: flex;
		flex-direction: column;
	}
	
	/* 开关容器样式 */
	.switch-container {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	
	.switch-label {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}
	
	/* 轮播图上传样式 */
	.banner-uploader {
		background-color: #F8F8F8;
		border-radius: 8rpx;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.banner-preview {
		width: 100%;
		height: 200rpx;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.banner-delete {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFFFFF;
		text-align: center;
		line-height: 36rpx;
		font-size: 32rpx;
		border-radius: 0 0 0 8rpx;
	}
	
	.banner-add {
		width: 100%;
		height: 200rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #CCCCCC;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.doc-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 15rpx;
	}
	
	.doc-info {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}
	
	.doc-icon {
		font-size: 32rpx;
		margin-right: 10rpx;
	}
	
	.doc-name {
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
	}
	
	.doc-delete {
		width: 40rpx;
		height: 40rpx;
		background-color: #F2F2F2;
		color: #999999;
		text-align: center;
		line-height: 36rpx;
		font-size: 32rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}
	
	.doc-add {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #CCCCCC;
		border-radius: 8rpx;
	}
	
	/* 添加编辑器相关样式 */
	.editor-container {
		width: 100%;
		margin-bottom: 20rpx;
		border: 1px solid #e0e0e0;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
	}
	
	.editor-toolbar {
		background-color: #f8f8f8;
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #e0e0e0;
		position: sticky;
		top: 0;
		z-index: 2;
	}
	
	.toolbar-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 6rpx;
		border-radius: 6rpx;
		background-color: white;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.toolbar-btn.active {
		background-color: #e6f7ff;
		box-shadow: 0 0 0 2rpx #1890ff;
	}
	
	.toolbar-btn:active {
		background-color: #f0f0f0;
	}
	
	.toolbar-icon {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.editor {
		padding: 20rpx;
		min-height: 600rpx;
		background-color: white;
	}
	
	/* 全屏模式 */
	.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		background-color: white;
		border-radius: 0;
	}
	
	.fullscreen .editor {
		height: calc(100vh - 100rpx);
	}
	
	.fullscreen-btn {
		width: auto;
		padding: 0 16rpx;
	}
	
	.fullscreen-text {
		font-size: 26rpx;
	}
	
	/* 下拉菜单 */
	.toolbar-dropdown {
		position: relative;
		margin: 6rpx;
	}
	
	.dropdown-toggle {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 4rpx;
	}
	
	.dropdown-arrow {
		font-size: 20rpx;
	}
	
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 160rpx;
		background-color: white;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		z-index: 3;
		padding: 10rpx 0;
	}
	
	.dropdown-item {
		padding: 16rpx 20rpx;
		font-size: 28rpx;
	}
	
	.dropdown-item:active {
		background-color: #f0f0f0;
	}
	
	/* 颜色选择器 */
	.font-color-icon {
		position: relative;
	}
	
	.underline {
		position: absolute;
		bottom: -2rpx;
		left: 0;
		right: 0;
		height: 4rpx;
	}
	
	.color-menu {
		width: 240rpx;
	}
	
	.color-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}
	
	.color-item {
		width: 40rpx;
		height: 40rpx;
		margin: 4rpx;
		border-radius: 4rpx;
		border: 1px solid #e0e0e0;
	}
	
	/* 对齐图标 */
	.align-icon {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
		width: 36rpx;
	}
	
	.align-line {
		height: 2rpx;
		background-color: #333;
	}
	
	.full-line {
		width: 100%;
	}
	
	.left-line {
		width: 60%;
	}
	
	.center-line {
		width: 60%;
		margin: 0 auto;
	}
	
	.right-line {
		width: 60%;
		margin-left: auto;
	}
	
	/* 项目符号图标 */
	.bullet-icon {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
		width: 36rpx;
	}
	
	.bullet-item {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}
	
	.bullet-dot {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background-color: #333;
	}
	
	.bullet-line {
		flex: 1;
		height: 2rpx;
		background-color: #333;
	}
</style> 